<template>
  <div class="page-cont">
    <van-nav-bar
      :title="name"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-search
      v-model="search"
      placeholder="输入梁片名称查询"
    />
    <van-tabs v-model="status">
      <van-tab
        title="当前"
        :name="1"
      />
      <van-tab
        title="进行中"
        :name="2"
      />
      <van-tab
        title="全部"
        :name="3"
      />
    </van-tabs>
    <scroll-list
      v-model="list"
      @onLoad="onLoad"
      ref="list"
    >
      <task-item
        v-for="(item, i) in list"
        :key="i"
        :data="item"
        :name="name"
        :status="status"
        @setTask="setTask(i)"
        @click.native="goDetail(item)"
      />
    </scroll-list>
  </div>
</template>

<script>
import ScrollList from '@/components/ScrollList/index.vue'
import TaskItem from './components/TaskItem.vue'

export default {
  name: "TaskPage",
  components: {
    TaskItem,
    ScrollList
  },
  data() {
    return {
      search: '',
      name: '',
      status: 1,
      list: [],
    };
  },
  created() {
    this.name = this.$route.params.name
  },
  watch: {
    status() {
      this.$refs.list.refresh()
    }
  },
  methods: {
    goDetail(item) {
      if(this.status != 1) {
        this.$router.push({
          path: '/task/set/' + item.preBridgeId,
          query: {
            type: 'view'
          }
        });
      }
    },
    async onLoad(page, done) {
      let res = await this.api.GET_TASK_LIST({pageNo: page, pageSize: 10, status: this.status, procedureName: this.name})
      this.list.push(...res.list)

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage)
    },
    setTask(i) {
      let item = this.list[i]
      this.$router.push('/task/set/' + item.id)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
